@import './prism.css';
@import './nprogress.css';
@import './ads.css';

@import 'tailwindcss';

@config '../tailwind.config.js';

@plugin '@tailwindcss/typography';

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }

  /* 
    Default button style missing pointer cursor property  
    Issue: https://github.com/tailwindlabs/tailwindcss/issues/15773
  */
  button, [role="button"] {
    cursor: pointer;
  }

  /*
    Make sure disabled buttons don't get the pointer cursor.
  */
  :disabled {
    cursor: default;
  }
}

@layer base {
  :root {
    /* code colors */
    --code-foreground: 244 244 244;
    /* landing code window colors */
    --code-syntax1: 97 175 239;
    --code-syntax2: 152 195 121;
    --code-syntax3: 198 120 221;
    --code-syntax4: 212 212 216;
    --code-syntax5: 229 192 123;
    --code-syntax6: 145 180 213;
    --code-removed: 248 113 160;
    --code-highlighted-word1-bg: 120 40 200;
    --code-highlighted-word1-bg-active: 96 32 160;
    --code-highlighted-word1-text: 48 16 80;
    --code-highlighted-word2-bg: 253 208 223;
    --code-highlighted-word2-bg-active: 243 18 96;
    --code-highlighted-word2-text: 250 160 191;
    --code-highlighted-word3-bg: 116 223 162;
    --code-highlighted-word3-bg-active: 116 223 162;
    --code-highlighted-word3-text: 209 244 224;
    /* sandpack + prism */
    --code-string: 83, 224, 192;
    --code-class: 145 180 213;
    --code-punctuation: 167 172 202;
    --code-number: 83, 224, 192;
    --code-added: 116 223 162;
    --code-line-number: 212 212 216;
    --code-faded-line: 113 113 122;
    --code-comment: 113 113 122;
    --code-keyword: 198 120 221;
    --code-function: 97 175 239;
    --code-tag: 83, 224, 192;
    --code-attr-name: 145 180 213;
    --code-language-javascript: 145 180 213;
  }
}

@utility step {
  counter-increment: step;

  &:before {
    @apply absolute w-7 h-7 border-1 border-default-200 bg-default-100 rounded-full font-semibold text-center text-base inline-flex items-center justify-center -indent-px;
    @apply ml-[-41px];
    content: counter(step);
  }
}

html {
  font-size: 16px;
  padding: 0px !important;
  overflow-x: hidden;
  scroll-padding-top: 64px;
}

body {
  min-height: 100vh;
}
/* Experimental */
/* body::after { 
  background-image: radial-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 40%),
  radial-gradient(rgb(255, 209, 82) 30%, rgb(226, 105, 150), rgba(226, 105, 150, 0.4) 41%, transparent 52%),
  radial-gradient(rgb(160, 51, 255) 37%, transparent 46%),
  linear-gradient(155deg, transparent 65%, rgb(37, 212, 102) 95%),
  linear-gradient(45deg, rgb(0, 101, 224), rgb(15, 139, 255));
  background-position: left bottom, 109% 68%, 109% 68%, center center, center center;
  background-repeat: no-repeat;
  background-size: 200% 200%, 285% 500%, 285% 500%, cover, cover;
  content: "";
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.17;
  position: fixed;
  z-index: 0;
  } */

  /* 
  @media screen and (max-width: 640px) {
    #app-container {
      height: 100vh;
      overflow-x: hidden;
    }
  }
 */

pre details[open]>summary>span:first-child::before {
  transform: rotate(90deg);
}

pre details[open]>summary span.custom-folder {
  display: none;
}

pre details:not([open])>summary span.ellipsis-token::after {
  content: '...';
}

pre details:not([open])>summary span.copy-token {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

pre details[open]>summary span.copy-token {
  display: none;
}

pre details:not([open]) {
  display: inline;
}

pre details:not([open])>summary span.empty-token {
  display: none;
}

pre details:not([open])+div.token-line {
  display: none;
}

pre summary {
  display: inline;
  position: relative;
  list-style: none;
}

pre summary>span:first-child::before {
  position: absolute;
  display: inline-flex;
  align-items: center;
  height: 21px;
  margin-left: -16px;
  margin-top: 1px;
  content: "▶";
  font-size: 12px;
  font-style: normal;
  transition: transform 100ms;
  color: #999;
}